<template>
	<view class="time-line-item">
		<slot></slot>
		<view v-if="!isShow">
			<view class="content">
				<view class="content-node">{{ title }}时间 {{ Timer }}</view>
				<view class="content-type">
					打卡时间 {{ sign.time ? sign.time : '' }}
					<text class="mode" :class="'mode' + sign.mode" v-if="sign.mode">{{ resultMap[sign.mode] }}</text>
				</view>
				<view class="content-address">
					<view>
						<u-icon name="map"></u-icon>
						{{ sign.address ? sign.address : '未打卡' }}
					</view>
					<view class="mode-btn" v-if="['1', '2', '3'].indexOf(sign.mode) != -1" @click="clickNav()">处理异常</view>
				</view>
			</view>
		</view>
		<view v-else class="content-show">
			<view v-if="isInner == true">
				<view class="content-time1">{{ title }}时间 {{ Timer }}</view>
				<view class="module CBlue" @click="clickSign()">
					{{ title }}打卡
					<view class="content-time2">{{ time }}</view>
				</view>
				<view class="content-add">
					<view class="color-green">
						<u-icon name="map" class="color-green"></u-icon>
						已在考勤范围内
					</view>
					<text class="relocation" @click="relocation()">重新定位</text>
				</view>
			</view>
			<view v-else-if="isInner == false">
				<view class="content-time1">{{ title }}时间 {{ Timer }}</view>
				<view class="module CGreen" @click="clickSign()">
					<text class="text">外勤打卡</text>
					<view class="content-time2">{{ time }}</view>
				</view>
				<view class="content-add">
					<view class="color-red clamp">
						<u-icon name="map" class="color-red"></u-icon>
						{{ address ? address : '请检查位置信息' }}
					</view>
					<text class="relocation" @click="relocation()">重新定位</text>
				</view>
			</view>
			<view v-else-if="isInner == null">
				<view class="content-time1">{{ title }}时间 {{ Timer }}</view>
				<view class="module CAsh">
					<view class="text">请检查位置信息</view>
					<view class="content-time2">{{ time }}</view>
				</view>
				<view class="relocation relocation2" @click="relocation()">重新定位</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-time-sign',
	data() {
		return {
			time: '',
			resultMap: {
				0: '正常',
				1: '迟到',
				2: '早退',
				3: '缺卡',
				4: '出差',
				5: '请假',
				6: '调休',
				7: '外勤',
				8: '加班'
			}
		};
	},
	props: {
		title: {
			type: String,
			default: '上班'
		},
		isShow: {
			type: [Boolean, String],
			default: ''
		},
		isInner: {
			type: [Boolean, String],
			default: ''
		},
		Timer: {
			type: String,
			default: ''
		},
		num: {
			type: String,
			default: ''
		},
		sign: {
			type: Object,
			default: function () {
				return {};
			}
		},
		address: {
			type: String,
			default: ''
		}
	},
	created() {
		this.getTime(); //获取时间
	},
	destroyed() {
		clearInterval();
	},
	methods: {
		getTime() {
			// 实时时间
			let date = this.$writeCurrentDate();
			this.time = date.hour + ':' + date.minu + ':' + date.sec;
			setInterval(() => {
				date = this.$writeCurrentDate();
				this.time = date.hour + ':' + date.minu + ':' + date.sec;
			}, 1000);
		},
		clickNav() {
			this.$emit('clickNav', this.Timer);
		},
		clickSign() {
			this.$emit('clickSign', this.num);
		},
		relocation() {
			this.$emit('relocation', this.num);
		}
	},
	destroyed() {}
};
</script>

<style lang="scss">
.content {
	font-size: 16px;
	line-height: 36rpx;
}

.content-node {
	// margin-left: 20rpx;
	color: #666;
	font-size: 14px;
	margin-bottom: 10rpx;
}

.content-type {
	display: flex;
	align-items: center;
	line-height: 42rpx;
}

.content-address {
	margin-top: 10rpx;
	font-size: 14px;
	line-height: 36rpx;
	color: #666666;
	width: 80%;
}

.content-time1 {
	font-size: 14px;
	line-height: 40rpx;
	color: #666;
}

.content-time2 {
	font-size: 15px;
	line-height: 48rpx;
	text-align: center;
}

.color-red {
	color: #ff0000;
}

.color-green {
	color: #3dd2a8;
}

.color-yellow {
	color: #ffb338;
}

.color-blue {
	color: #67b2ff;
}

.bg-blue {
	background-color: #67b2ff;
}

.bg-green {
	background-color: #3dd2a8;
}

.bg-ash {
	background-color: #ffb338;
}

.mode-btn {
	display: inline-block;
	margin-top: 10upx;
	padding: 0 20upx;
	font-size: 14px;
	color: #3396fb;
	line-height: 38upx;
	border-radius: 38upx;
	border: 1upx solid;
	vertical-align: top;
}
.mode {
	margin-left: 10rpx;
	padding: 0 10rpx;
	font-size: 13px;
	color: #f5a623;
	line-height: 38rpx;
	border-radius: 4rpx;
	border: 1rpx solid;
}

.mode0 {
	color: #666;
}

.mode1 {
	color: #ff7100;
}

.mode2 {
	color: #ff7100;
}

.mode3 {
	color: #ff7100;
}

.mode4 {
	color: #3396fb;
}

.mode5 {
	color: #49d34e;
}

.mode6 {
	color: #f5a623;
}

.mode7 {
	color: #2bba91;
}
.module {
	overflow: hidden;
	margin: 30rpx auto 10rpx;
	padding-top: 80rpx;
	font-size: 19px;
	line-height: 48rpx;
	color: #fff;
	text-align: center;

	width: 246rpx;
	height: 246rpx;
	border-radius: 246rpx;

	.text {
		font-size: 16px;
	}
}

.CBlue {
	background: linear-gradient(180deg, #7dbdff 0%, #3396fb 100%);
	box-shadow: 0 3rpx 16rpx 0 #67b2ff;
}

.CGreen {
	background: linear-gradient(180deg, #57e4bb 0%, #2bba91 100%);
	box-shadow: 0 3rpx 16rpx 0 #3dd2a8;
}

.CAsh {
	background: linear-gradient(180deg, #ffbe55 0%, #ffa71b 100%);
	box-shadow: 0 3rpx 16rpx 0 #ffb338;
}

.content-add {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.relocation {
	flex-shrink: 0;
	padding: 20rpx;
	font-size: 14px;
	color: #67b2ff;
}

.relocation2 {
	text-align: right;
}
</style>
